<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{admin/layout}">

<head>
	<title>Law Manage</title>
	<style>
	  #editor—wrapper {
	    border: 1px solid #ccc;
	    z-index: 100; /* 按需定义 */
	  }
	  #toolbar-container { border-bottom: 1px solid #ccc; }
	  #editor-container { height: 500px; }
	</style>
</head>

<body layout:fragment="content">
	<div class="card shadow">
		<div class="card-header border-bottom d-flex justify-content-between align-items-center">
			<h5 class="card-title mb-0">Law List</h5>
		</div>
		<div class="card-body">
			<table id="lawTable"></table>
		</div>
		<!--<div class="card-footer pt-0">
			Footer
		</div>-->
	</div>
	<!---->
	<div class="modal fade" id="lawModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">Law Setting</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<form id="lawForm">
								<input type="hidden" class="form-control" value="" id="lawId" name="lawId">
								<div class="mb-3">
									<label class="form-label">Remark</label>
									<input type="text" class="form-control" value="" id="lawRemark" name="lawRemark">
								</div>
								<div class="mb-3">
									<label class="form-label">Content</label>
									<textarea style="display: none;" id="lawContent" name="lawContent"></textarea>
									<div id="editor—wrapper">
									    <div id="toolbar-container"></div>
									    <div id="editor-container"></div>
									</div>
								</div>
								<!-- Save button -->
								<div class="d-flex justify-content-end mt-4">
									<button type="button" class="btn btn-default"
										onclick="closeLawModal()">Close</button>
									<button type="submit" class="btn btn-primary">Submit</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<script layout:fragment="script">
		var lawFormValidate = null
		//, EDIT = null
		const { createEditor, createToolbar } = window.wangEditor
		var editor = null
		$(document).ready(function () {
			lawFormValidate = 
			$("#lawForm").validate({
				rules: {
					lawId: {
						required: true
					},
					lawRemark: {
						required: true
					},
					lawContent: {
						required: false
					}
				},
				submitHandler: function (form) {
					var formData = $(form).serialize();
					saveLaw(formData);
					return false
				}
			})
			loadLawTable()
			const editorConfig = {
			    placeholder: 'Type here...',
			    onChange(editor) {
			      const html = editor.getHtml()
			      //console.log('editor content', html)
			      $('#lawContent').val(html)
			    }
			}
			editor = createEditor({
			    selector: '#editor-container',
			    html: '<p><br></p>',
			    config: editorConfig,
			    mode: 'simple', // or 'default'
			})
			const toolbarConfig = {}
			const toolbar = createToolbar({
			    editor,
			    selector: '#toolbar-container',
			    config: toolbarConfig,
			    mode: 'simple', // or 'default'
			})
		});
		function loadLawTable() {
			$('#lawTable').bootstrapTable('destroy');
			$('#lawTable').bootstrapTable({
				url: "[[@{'/admin/laws'}]]",
				uniqueId: 'lawId',
				dataType: "json",
				pagination: true,
				pageSize: 10,
				queryParams: function (params) {
					var temp = {
						size: params.limit,
						page: (params.offset / params.limit),
						sort: params.sort,
						sortOrder: params.order
					};
					return temp;
				},
				sidePagination: "server",
				pageList: [30, 50],
				columns: [{
					title: 'Sort',
					formatter: function (value, row, index) {
						var pageSize = $('#lawTable').bootstrapTable('getOptions').pageSize;
						var pageNumber = $('#lawTable').bootstrapTable('getOptions').pageNumber;
						return pageSize * (pageNumber - 1) + index + 1;
					}
				}, {
					field: 'lawRemark',
					title: 'Remark',
					formatter: function (value, row, index) {
						return value
					}
				}, {
					field: 'lawTime',
					title: 'Created',
					formatter: function (value, row, index) {
						return value
					}
				}
				, {
					field: 'lawModify',
					title: 'Modified',
					formatter: function (value, row, index) {
						return value
					}
				}
				, {
					title: 'Operate',
					field: 'lawId',
					class: 'text-center',
					width: '20%',
					formatter: function (value, row, index) {
						let res = '<button class="btn btn-sm btn-warning" onclick="modifyLawModal(\'' + value + '\')">Modify</button>&nbsp;';
						return res;
					}
				},],
				onPostBody: function (value) {
					$(".fixed-table-container").css('padding-bottom', '37px');
				}
			});
		}
		function closeLawModal() {
			lawFormValidate.resetForm()
			$('#lawModal').modal('hide')
		}
		function modifyLawModal(lawId) {
			var data = $("#lawTable").bootstrapTable('getRowByUniqueId', lawId);
			$('#lawId').val(data.lawId)
			$('#lawRemark').val(data.lawRemark)
			$('#lawContent').val(data.lawContent)
			editor.setHtml(data.lawContent)
			$('#lawModal').modal('show')
		}
		function saveLaw(data) {
			/**$('#lawContent').val(EDIT.txt.html())
			if(!$('#lawContent').val()){
				layer.msg('Empty Content');
				return null
			}**/
			$.post(ctx + "/admin/updateLaw", data, function (resp) {
				if (resp.status == 0) {
					loadLawTable();
					$('#lawModal').modal('hide');
				}
				layer.msg(resp.msg);
			})
		}
	</script>
</body>

</html>